<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>跟进</span>
                <span></span>
            </div>

            <el-form ref="form" :model="form" label-width="80px" label-position="top">

                <el-row :gutter="30">

                    <el-col :span="8">
                        <el-form-item label="客户名称:">
                            <el-input disabled v-model="oldDetail.customerName" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="跟进人:" prop="followMan">
                            <el-input disabled v-model="oldDetail.followerNames" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="跟进时间:" prop="time">
                            <el-input disabled v-model="oldDetail.lastFollowTime" clearable></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

            </el-form>
        </div>

        <div class="card-wrap flex-column justify-end card-padding">
            <el-tabs v-model="activeName">
                <el-tab-pane label="线索跟进" name="first">
                    <el-form ref="followForm" :rules="rules" :model="followForm" label-width="80px" label-position="top"
                             style="margin-bottom: 20px;">

                        <el-row :gutter="30">

                            <el-col :span="8">
                                <el-form-item label="跟进方式:" prop="followSourceCode">
                                    <el-select @change="followChange" filterable v-model="followForm.followSourceCode"
                                               clearable
                                               style="width: 100%">
                                        <template v-for="dict in dict.type.clues_source">
                                            <el-option :label="dict.label" :value="dict.value"
                                                       :key="dict.value"></el-option>
                                        </template>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="跟进状态:" prop="followStatusCode">
                                    <el-select @change="followStatusChange" filterable
                                               v-model="followForm.followStatusCode" clearable
                                               style="width: 100%">
                                        <template v-for="dict in dict.type.clues_status">
                                            <el-option :label="dict.label" :value="dict.value"
                                                       :key="dict.value"></el-option>
                                        </template>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="8">
                                <el-form-item label="意向情况:" prop="followIntentionCode">
                                    <el-select filterable v-model="followForm.followIntentionCode" clearable
                                               style="width: 100%">
                                        <template v-for="dict in dict.type.clues_intention">
                                            <el-option :label="dict.label" :value="dict.value"
                                                       :key="dict.value"></el-option>
                                        </template>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="16">
                                <el-form-item label="跟进内容:" prop="followMemo">
                                    <el-input maxlength="500" v-model="followForm.followMemo" type="textarea" :rows="2"
                                              clearable placeholder="请输入跟进内容"></el-input>
                                </el-form-item>
                            </el-col>

                        </el-row>

                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="跟进历史记录" name="second">
                    <el-timeline>
                        <el-timeline-item :timestamp="`跟进时间：${item.followTime}`" placement="top"
                                          v-for="(item, index) in recordList" :key="index">

                            <div class="flex-column timeline-wrap">

                                <div class="flex justify-between align-center">
                                    <h4>跟进人：{{ item.followerName }}</h4>
                                    <!--                  <p>跟进时间: {{ item.followTime }}</p>-->
                                </div>

                                <span>跟进方式：{{ item.followSource|filterNull }}
                                    <!--                                    <dict-tag-->
                                    <!--                                    :options="dict.type.clues_source"-->
                                    <!--                                    :value="item.followSourceCode"/>-->
                                </span>
                                <span>跟进状态：{{ item.followStatus|filterNull }}
                                    <!--                                    <dict-tag-->
                                    <!--                                    :options="dict.type.clues_status"-->
                                    <!--                                    :value="item.followStatusCode"/>-->
                                </span>
                                <span>意向情况：<dict-tag
                                    :options="dict.type.clues_intention"
                                    :value="item.followIntentionCode"/></span>
                                <span>跟进内容：{{ item.followMemo|filterNull }}</span>
                            </div>

                        </el-timeline-item>

                    </el-timeline>
                </el-tab-pane>
            </el-tabs>


        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">取消</el-button>
            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>
        </div>

    </div>
</template>

<script>


import {
    cluesAdd,
    cluesDetail,
    cluesFollowRecord,
    cluesFollowRecordAdd,
    cluesTransferRecord,
    cluesUpdate
} from "@/api/memberManage/clueList";

export default {
    name: "clueFollow",
    components: {},
    dicts: ['clues_source', 'clues_status', 'clues_intention'],
    data() {
        return {
            buttonLoading: false,
            form: {},
            followForm: {},
            recordList: [],
            activeName: 'first',
            oldDetail: {},
            rules: {
                followSourceCode: [
                    {
                        required: true,
                        message: '请选择跟进方式',
                        trigger: 'change'
                    }
                ],
                followStatusCode: [
                    {
                        required: true,
                        message: '请选择跟进状态',
                        trigger: 'change'
                    }
                ],
                followIntentionCode: [
                    {
                        required: true,
                        message: '请选择意向情况',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    watch: {
        // '$route': {
        //     handler(val) {
        //         console.log('this.$route', this.$route)
        //
        //         if (val && val.name == this.$options.name) {
        //             if (this.$route.query && this.$route.query.cluesId && !this.$route.query.tabClick) {
        //                 this.getOldData(this.$route.query.cluesId);
        //                 this.getRecord(this.$route.query.cluesId);
        //             }
        //             // else if(!this.$route.query.tabClick){
        //             //     this.infoData = {}
        //             // }
        //
        //         }
        //     },
        //     immediate: true,
        //     deep: true
        // }
    },
    mounted() {
        if (this.$route.query && this.$route.query.cluesId) {
          this.getOldData(this.$route.query.cluesId);
          // this.getRecord(this.$route.query.cluesId);
        }
    },
    methods: {
        followStatusChange(val) {
            let find = this.dict.type.clues_status.find(item => val == item.value);
            if (find) {
                this.followForm.followStatus = find.label;
            } else {
                this.followForm.followStatus = null;
            }
        },
        followChange(val) {
            let find = this.dict.type.clues_source.find(item => val == item.value);
            if (find) {
                this.followForm.followSource = find.label;
            } else {
                this.followForm.followSource = null;
            }
        },
        cancel() {
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        submitForm() {
            let that = this
            this.$refs["followForm"].validate(valid => {
                if (valid) {
                    this.buttonLoading = true;

                    cluesFollowRecordAdd({
                        cluesId: that.$route.query.cluesId,
                        ...that.followForm
                    }).then(res => {
                        this.buttonLoading = false;
                        this.$modal.msgSuccess("跟进成功");
                        this.$router.back();
                        this.$store.dispatch('tagsView/delView', this.$route);
                    }).finally(e => {
                        this.buttonLoading = false;
                    })
                }
            });
        },
        getOldData(cluesId) {
            cluesDetail(cluesId).then(res => {
                this.oldDetail = res.data.clues
            }).finally(f=>{
                this.getRecord(this.$route.query.cluesId);
            })
        },
        getRecord(cluesId) {
            cluesFollowRecord(cluesId).then(res => {
                this.recordList = res.data
                if (res.data && res.data.length) {
                    this.oldDetail = {
                        customerName: this.oldDetail.customerName,
                        ...res.data[0],
                        followerNames: this.oldDetail.followerNames,
                        lastFollowTime: this.oldDetail.lastFollowTime,
                    }
                }
            })
        },
    }
};
</script>


<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}

::v-deep .el-tabs__item {
    font-size: 16px !important;
    //color: #333333;
    font-weight: bold;
    margin-top: -6px;
}

::v-deep .el-timeline-item__content span div {
    display: inline-block;
}

::v-deep .el-tag {
    background: transparent !important;
    border: none !important;
    color: $black33;
    font-size: 14px;
    padding: 0 !important;
}

</style>
